<template>
    <div class="conter">


        <!-- 
        v-mode 的三个修饰符：
            lazy:   失去焦点再收集数据
            number: 输入字符串转为有效的数字
            trim:   输入首尾空格过滤 
        -->

        <form>
            账号: <input type="text" v-model.trim="user.account" autofocus placeholder="请输入账号" maxlength="2048" /><br><br>
            密码: <input type="password" placeholder="请输入密码" /><br><br>
            手机: <input type="phone" v-model.number="user.phone" placeholder="请输入手机号" /><br><br>

            性别:
            <input type="radio" v-model="user.sex" name="sex" value="man" />男
            <input type="radio" v-model="user.sex" name="sex" value="woman" />女<br><br>

            标签:
            <!--  <input type="checkbox" v-model="user.tags" name="tag" value="潮男" />潮男
            <input type="checkbox" v-model="user.tags" name="tag" value="潮女" />潮女
            <input type="checkbox" v-model="user.tags" name="tag" value="数字游民" />数字游民
            <input type="checkbox" v-model="user.tags" name="tag" value="web3" />web3 -->

            <label v-for="(item) in user.tags" :key="item.id">
                <input type="checkbox" name="tag" v-model="item.checked" > {{ item.name }}
            </label>

            <!-- 默认会刷新页面阻止默认行为 -->
            <button @click.prevent="selectAll">{{ selectButton }}</button>

            <br><br>

            学校:
            <select v-model="user.school.name">
                <option v-for="(item, index) in schools" :key="index">{{ item.name }}</option>
            </select>

            校区:
            <select v-model="user.school.city">
                <option v-for="(item, index) in schoolCitys" :key="index">{{ item }}</option>
            </select>

           

            <!-- <div>
                <div>hello {{ str }}</div>
                <div v-text="`hello ${str}`"></div>

            </div> -->



        </form>


    </div>
</template>

<script>


export default {
    name: 'HelloInput',
    data() {
        return {
            user: {
                account: '',
                password: '',
                sex: 'man',
                phone: null,
                tags: [
                    { id: 1, name: '潮男', checked: false },
                    { id: 2, name: '潮女', checked: false },
                    { id: 3, name: '数字游民', checked: false },
                    { id: 4, name: 'web3', checked: false },
                ],
                school: { name: '圆明园职业技术学院', city: '北京' }
            },
            schools: [
                { name: '五道口职业技术学校', citys: ['北京', '深圳','汉中'] },
                { name: '圆明园职业技术学院', citys: ['北京', '上海','成都'] },
                { name: '上海市第一建筑施工队', citys: ['上海', '火星','杭州'] }
            ],
            selectButton: '全选',
            str:''

        }
    },

    computed: {
        schoolCitys() {
            return this.schools.filter(item => item.name === this.user.school.name)[0].citys
        }
    },

    methods: {
        selectAll() {
            if (this.selectButton === '全选') {
                this.user.tags.forEach(item => {
                    item.checked = true
                })
                this.selectButton = '取消全选'
            } else {
                this.user.tags.forEach(item => {
                    item.checked = false
                })
                this.selectButton = '全选'
            }

        }
    }
}
</script>

